<template>
    <div >
        <div :class="'application-channel-tag mt-2 '+ className" @click="changeStatus">
            <div class="cancel">
                撤稿
            </div>
            <div class="reset">
                投稿
            </div>
            {{statusText}}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // statusText: '投稿',
            //status:0
        };
    },
    computed: {
        statusText(){
            switch (this.status) {
                case 0:
                    return '投稿'
                    break;
                case 1:
                    return '审核中'
                    break;
                case 2:
                    return '审核失败'
                    break;
                case 3:
                    return '审核成功'
                    break;
                case 4:
                    return '收录成功'
                    break;
                case 5:
                    return '已投'
                    break;
                default:
                    return '投稿'
                    break;
            }
        },
        className(){
            switch (this.status) {
                case 0:
                    return ''
                    break;
                case 1:
                    return 'application-channel-tag-auditing'
                    break;
                case 2:
                    return 'application-channel-tag-fail'
                    break;
                case 3:
                    return 'application-channel-tag-success'
                    break;
                case 4:
                    return 'application-channel-tag-success'
                    break;
                case 5:
                    return 'application-channel-tag-selected'
                    break;
                default:
                    return ''
                    break;
            }
        }
    },
    props:{
        'status':{
            type: Number,
            default: 0
        }
    },
    methods:{
        changeStatus(){
            if(this.status == 0 || this.status == 2){
                this.$emit('change',5)
            }else{
                this.$emit('change',0)
            }
            
        }
    }
}
</script>
<style >
    .application-channel-tag{
        position: relative;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background-color: #eef9ff;
        border-radius: 7px;
        color: #409EFF;
    }
    .application-channel-tag-selected{
        border-color: #409EFF;
        background-color: #fff;
    }
    
    .application-channel-tag-auditing{
        color: #8795a1;
        border-color: #f2f2f2;
        background-color: #f2f2f2;
    }
    .application-channel-tag-auditing:hover .cancel{
        display: block;
    }
    .application-channel-tag-fail{
        color: #e54458;
        border-color: #fff5f6;
        background-color: #fff5f6;
    }
    .application-channel-tag-fail:hover .reset{
        display: block;
    }
    .application-channel-tag-success{
        color: #fff;
        /* border-color: #67C23A; */
        background-color: #67C23A;        
    }
    .application-channel-tag-success:hover .cancel{
        display: block;
    }
    .cancel{
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 5px;
        background-color: #fff5f6;
        border-color: #fff5f6;
        border:1px solid #fff5f6;
        color: #e54458;
        z-index: 100;
    }
    .reset{
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 5px;
        background-color: #eef9ff;
        border-color: #eef9ff;
        border:1px solid #eef9ff;
        color: #409EFF;
        z-index: 100;
    }
</style>
